iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0

View翻譯為「視圖」,負責顯示Controller傳來的資料與指令;因此View中的程式碼只專注於呈現資料的用途,其他的運算邏輯與流程,View都不會介入;而在管理的功能層叫作「表現層」,顧名思義是負責管理畫面的呈現,也就是HTML樣板(template)。

View包含Html Helper與Razor兩種寫法,本章節先來說說Html Helper:

  1. 弱型別:
    說明:參數一為網頁主旨呈現的文字,參數二為對應Controller中的Action,參數三為預設的Controller。
    @Html.ActionLink("linkText","actionName","controlName")

    Ex:
    @Html.ActionLink("首頁","Index","Home")

    HTML Helper方法 產生的HTML

    @Html.ActionLink() | <a href="..."></a>
    @Html.BeginForm() | <form action="..." method="..."></form>
    @Html.Label() | <label></label>
    @Html.CheckBox() | <input type="checkbox" />
    @Html.RadioButton() | <input type="radio" />
    @Html.Hidden() | <input type="hidden" />
    @Html.TextBox() | <input type="text" />
    @Html.Password() | <input type="password" />
    @Html.ValidationSummary | 顯示所有驗證失敗的訊息

  2. 強型別:可傳入Model,都是以For作為結尾,若使用強型別Helper,需在View的頂端使用@model定義所參考的Model來源,才能正確編譯。
    說明:參數一為自訂變數,參數二為預設Model中的欄位名稱。
    @Html.DisplayFor(itemName => modelName)

    Ex:

    @model List<DemoMVC.Models.DBManger.GiveValue>
    
    @foreach (var item in Model)
    {
        <tr>
    	    <td>
        	    @Html.DisplayFor(modelItem => item.name)
            </td>
        </tr>
    }
    
    HTML Helper方法 產生的HTML

    @Html.DisplayNameFor() | 顯示物件Model屬性的名稱
    @Html.DisplayFor() | 顯示物件Model屬性的資料內容
    @Html.EditorFor() | 直接依照物件Model屬性產生對應<input>欄位
    @Html.LabelFor() | <label></label>
    @Html.CheckBoxFor() | <input type="checkbox" />
    @Html.RadioButtonFor() | <input type="radio" />
    @Html.HiddenFor() | <input type="hidden" />
    @Html.TextBoxFor() | <input type="text" />
    @Html.PasswordFor() | <input type="password" />
    @Html.ValidationMessageFor() | 顯示類別Model的ErrorMessage 訊息

好的,今天就先到這兒,明天再來繼續吧!

參考來源:
MVC架構是什麼?認識 Model-View-Controller 軟體設計模式。

ASP.NET MVC — HTML Helper


上一篇
Day06主題:認識Model
下一篇
Day08主題:認識View(2)
系列文
第一次學Web Service的經驗談31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言